<?php 
	require_once('sacvoyage/http/I18n.php'); 
	use \sacvoyage;
?>
<html>

<head>
<style>

body {
	text-align: center;
	background-color: silver;
}

form {
	vertical-align: center;
	background: white;
	display: inline-block;
	padding: 2em;
	//width: 350;
	//height: 200;
	border: solid black 1px;
	position: relative;
}

form p {
	margin: .5em;

}

.error {
	color: red;
}

.message {
	/*  */
}

form p.title {
	font-size: 1.5em;
	background-color: white;
}


</style>



<style>

ul.tabber {
	list-style: list-style: none;
	font-size: 1.25em;
	margin: 0px;
	padding: 0px;
}

ul.tabber>li {
	padding: 3px;
	display: inline-block;
	border-style: solid solid none solid;
	border-width: 1px;
	padding: 3px;
	margin: 0px;
	background: silver;
	position: relative;
	z-index: 0;
	margin-bottom: -1px;
}

ul.tabber>li.selected {
	border-style: solid solid none solid;
	background: white;
	font-weight: bold;
	z-index: 1;
}

ul.tabber>li:hover {
	cursor: hand;
}

</style>

</head>








<?php if(isset($shakeHead) && $shakeHead) { ?>
	<body onload="load();">
<?php } else { ?>
	<body>
<?php }?>


<script>
// code for tab behaviour
com_legeyda_tabber={};

com_legeyda_tabber.tabClick=function(event) {
	current=event.target;
	tabs=current.parentNode.getElementsByTagName("li");
	for(i=0; i<tabs.length; i++) {
		tab=tabs[i];
		body=document.getElementById(tab.getAttribute("data-for"));
		if(body) {
			if(tab==current) {
				body.style.display="";
				tab.className="selected";
			} else {
				body.style.display="none";
				tab.className="";
			}
		}
	}
}

com_legeyda_tabber.initTabber=function(ul) {
	tabs=ul.getElementsByTagName("li");
	for(i=0; i<tabs.length; i++) {
		tab=tabs[i];
		tab.addEventListener("click", com_legeyda_tabber.tabClick, false);
		body=document.getElementById(tab.getAttribute("data-for"));
		if(body) {
			if(tab.className=="selected") {
				body.style.display="";
			} else {
				body.style.display="none";
			}
		}
	}
}

com_legeyda_tabber.init=function() {
	uls=document.getElementsByTagName("ul");
	for(i in uls) {
		ul=uls[i];
		if(ul.className=="tabber") {
			com_legeyda_tabber.initTabber(ul);
		}
	}
}

window.addEventListener("load", com_legeyda_tabber.init, false);

</script>





















<?php if(isset($shakeHead) && $shakeHead) {?>
<script>

function load() {
	animate();
}

function animate() {
	if ( typeof animate.counter == 'undefined' ) {
        // It has not... perform the initilization
        animate.counter = 0;
    } else {
    	animate.counter++;
    }


	delta=[0, 1, 2, 1, 0, -1, -2, -1][animate.counter%8];
	
    document.getElementById('animated').style.left=20 * delta;
	
    if(animate.counter<20) {
        setTimeout(animate, 15);
    }

}

</script>
<?php } ?>


<br/><br/><br/><br/>



<div id="animated" style="position: relative;">
	<ul class="tabber">
		<?php if(isset($show_form) && $show_form=='signup') { ?>
		<li data-for="loginForm"><?php echo \sacvoyage\http\i18n('Login'); ?></li>	
		<li data-for="signupForm" class="selected"><?php echo \sacvoyage\http\i18n('Signup'); ?></li>	
		<?php } else { ?>
		<li data-for="loginForm" class="selected"><?php echo \sacvoyage\http\i18n('Login'); ?></li>	
		<li data-for="signupForm"><?php echo \sacvoyage\http\i18n('Signup'); ?></li>
		<?php } ?>
	</ul>
	<form id="loginForm" name="loginForm" method="POST" action="<?php echo $CONFIG['URL']['BASE']; ?>">
		<input type="hidden" name="action" value="login"/>
		<p class="title"><?php echo \sacvoyage\http\i18n('Open sacvoyage'); ?></p>
		
		<?php if(isset($login_message) && $login_message) { ?>
			<p class="message"><?php echo $login_message; ?></p>
		<?php } ?>
		
		<?php if(isset($login_error) && $login_error) { ?>
			<p class="error"><?php echo $login_error; ?></p>
		<?php } ?>
		
		<p><input type="text" name="user"/></p>
		<p><input type="password" name="password"/></p>
		<input type="submit" name="submit" value="<?php echo \sacvoyage\http\i18n('login'); ?>"/>
	</form>
	
	<?php if(isset($show_signup)) { ?>
	<form id="signupForm" name="signupForm" method="POST" action="<?php echo $CONFIG['URL']['BASE']; ?>">
		<input type="hidden" name="action" value="signup"/>
		<p class="title"><?php echo \sacvoyage\http\i18n('Sign up'); ?></p>
		
		<?php if(isset($signup_message) && $signup_message) { ?>
			<p class="message"><?php echo $signup_message; ?></p>
		<?php } ?>
		
		<?php if(isset($signup_error) && $signup_error) { ?>
			<p class="error"><?php echo $signup_error; ?></p>
		<?php } ?>
		
		<p><input type="text" name="user"/></p>
		<p><input type="password" name="password"/></p>
		<input type="submit" name="submit" value="<?php echo \sacvoyage\http\i18n('signup'); ?>"/>
	</form>
	<?php } ?>


</div>
</body>
</html>
